<template>
  <div class="workshops_container">
      <dv-loading v-if="loading"></dv-loading>
      <div class="workshops_top">
        <div class="top-icon">
          <!-- <img src="../../assets/img/gstb-t.png" alt /> -->
          <icon name="cog" scale="2"></icon>
        </div>
        <span>水峪选煤厂（300万）集控画面</span>
      </div>
      <div class="workshops_main">
        <svgMain :viewWidth="svgW" :viewHeight="svgH" :real="real"/>
      </div>
  </div>
</template>
<script>
import svgMain from "../components/ThreeMillionWorkshops/ThreeMillion";
import getSize from "../../mixins/getSize"
export default {
  components: {
    svgMain,
  },
  mixins:[getSize],
  data() {
    return {
      loading: true,
      real:{}
    };
  },
  sockets:{
    connect:function(data) {
      console.log("连接connect",data)
      this.createSocket()
    },
    reconnect(data){
      console.log("重新连接",data)
      // this.$sockets.emit("connect",1)
      this.$socket.connect()
    },
    disconnect(){
      console.log("socket已断开连接")
    },
    threedata(data){
      var temp=JSON.parse(data).threedata
      this.real=temp
      console.log(this.real,'message')
      if(this.real){
        this.loading = false;
      }
    },
  },
  beforeDestroy(){
   this.$socket.close()
  },
  mounted() {
    this.createSocket()
  },
  methods: {
    //创建socket链接
    createSocket(){
      this.$socket.connect()
      this.$socket.emit('threedata', { subscribe: true })
    }
  },
};
</script>

